<script setup lang="ts">
import { reactive, shallowRef, ref } from 'vue';
import { useAnimate } from '@vueuse/core';
import type { MaybeElement } from '@vueuse/core';

const el = shallowRef<MaybeElement>();
// const keyframes = ref({ transform: 'rotate(90deg)' });
// Or
const keyframes = ref([{ height: '30px' }, { height: '200px' }]);
// // Or
// const keyframes = ref([
//   { clipPath: 'circle(20% at 0% 30%)' },
//   { clipPath: 'circle(20% at 50% 80%)' },
//   { clipPath: 'circle(20% at 100% 30%)' },
// ]);
const {
  play,
  pause,
  reverse,
  finish,
  cancel,
  startTime,
  currentTime,
  playbackRate,
  playState,
  replaceState,
  pending,
  animate,
} = useAnimate(el, keyframes, {
  duration: 2000,
  commitStyles: true,
  immediate: false,
  persist: false,
  onReady: (animate) => {
    console.log(animate);
  },
  onError: (e) => {
    console.log(e);
  },
});

const text = JSON.stringify(
  reactive({
    startTime,
    currentTime,
    playbackRate,
    playState,
    replaceState,
    pending,
  })
);
</script>

<template>
  <div>
    <el-space>
      <el-button
        size="small"
        type="primary"
        v-if="playState === 'running'"
        @click="pause"
        >pause</el-button
      >
      <el-button type="primary" size="small" v-else @click="play"
        >play</el-button
      >
      <el-button type="primary" size="small" @click="reverse"
        >reverse</el-button
      >
      <el-button type="primary" size="small" @click="finish">finish</el-button>
      <el-button type="primary" size="small" @click="cancel">cancel</el-button>
    </el-space>
    <pre class="code-block">{{ text }}</pre>
    <div class="flex items-center justify-center w-full h-60 box">
      <span ref="el" style="display: block">useAnimate</span>
    </div>
  </div>
</template>
<style>
.box {
  span {
    height: 20px;
    background-color: salmon;
  }
}
</style>
